import _extends from 'babel-runtime/helpers/extends'
import './Header.less'

import 'ant-design-vue/es/layout/style'
import Layout from 'ant-design-vue/es/layout'

import PropTypes from 'ant-design-vue/es/_util/vue-types'
import BaseMenu from './components/RouteMenu/BaseMenu'
import { defaultRenderLogoAntTitle, SiderMenuProps } from './components/SiderMenu/SiderMenu'
import GlobalHeader, { GlobalHeaderProps } from './components/GlobalHeader'
import { VueFragment } from './components'
import { isFun } from './utils/util'

var Header = Layout.Header


export var HeaderViewProps = _extends({}, GlobalHeaderProps, SiderMenuProps, {
  isMobile: PropTypes.bool.def(false),
  collapsed: PropTypes.bool,
  logo: PropTypes.any,
  hasSiderMenu: PropTypes.bool,
  autoHideHeader: PropTypes.bool,
  menuRender: PropTypes.any,
  headerRender: PropTypes.any,
  rightContentRender: PropTypes.any,
  visible: PropTypes.bool.def(true)
})

var renderContent = function renderContent (h, props) {
  var isTop = props.layout === 'topmenu'
  var maxWidth = 1200 - 280 - 120
  var contentWidth = props.contentWidth === 'Fixed'
  var baseCls = 'ant-pro-top-nav-header'
  var logo = props.logo,
    title = props.title,
    theme = props.theme,
    isMobile = props.isMobile,
    headerRender = props.headerRender,
    rightContentRender = props.rightContentRender

  var rightContentProps = { theme: theme, isTop: isTop, isMobile: isMobile }
  var defaultDom = h(GlobalHeader, { props: props })
  if (isTop && !isMobile) {
    defaultDom = h(
      'div',
      { 'class': [baseCls, theme] },
      [h(
        'div',
        { 'class': [baseCls + '-main', contentWidth ? 'wide' : ''] },
        [h(
          'div',
          { 'class': baseCls + '-left' },
          [h(
            'div',
            {
              'class': baseCls + '-logo', key: 'logo', style: { backgroundImage: "url('./assets/top.png')", backgroundRepeat: 'no-repeat' }, attrs: { id: 'logo' }
            },
            [defaultRenderLogoAntTitle(h, { logo: logo, title: '', menuHeaderRender: null })]
          )]
        ), h(
          'div',
          { 'class': baseCls + '-menu', style: { maxWidth: maxWidth + 'px', flex: 1, backgroundImage: "url('./assets/top2.png')", backgroundRepeat: 'repeat-x' } },
          [h(BaseMenu, { props: props })]
        ), isFun(rightContentRender) && rightContentRender(h, rightContentProps) || rightContentRender]
      )]
    )
  }
  if (headerRender) {
    return headerRender(h, props)
  }
  return defaultDom
}

var HeaderView = {
  name: 'HeaderView',
  props: HeaderViewProps,
  render: function render (h) {
    var _$props = this.$props,
      visible = _$props.visible,
      isMobile = _$props.isMobile,
      layout = _$props.layout,
      collapsed = _$props.collapsed,
      siderWidth = _$props.siderWidth,
      fixedHeader = _$props.fixedHeader,
      autoHideHeader = _$props.autoHideHeader,
      hasSiderMenu = _$props.hasSiderMenu

    var props = this.$props
    var isTop = layout === 'topmenu'

    var needSettingWidth = fixedHeader && hasSiderMenu && !isTop && !isMobile

    var className = {
      'ant-pro-fixed-header': fixedHeader,
      'ant-pro-top-menu': isTop

      // 没有 <></> 暂时代替写法
    }
    return visible ? h(VueFragment, [fixedHeader && h(Header), h(
      Header,
      {
        style: {
          padding: 0,
          width: needSettingWidth ? 'calc(100% - ' + (collapsed ? 80 : siderWidth) + 'px)' : '100%',
          zIndex: 9,
          right: fixedHeader ? 0 : undefined,
          backgroundImage: "url('./assets/top2.png')",
          backgroundRepeat: 'repeat-x'
        },
        'class': className
      },
      [renderContent(h, props)]
    )]) : null
  }
}

export default HeaderView
